import React from "react";
import Like from "./like";
import TableHeader from "./tableHeader";
import TableBody from "./tableBody";

const MoviesTable = ({ movies, onLike, sortOrder, onSetMovies }) => {
  const columns = [
    {
      path: "title",
      label: "标题",
      content: (movie) => (
        <a target="_blank" href={movie.alt}>
          {movie.title}
        </a>
      ),
    },
    {
      path: "original_title",
      label: "原标题",
    },
    {
      path: "year",
      label: "上映时间",
      sorter: (a, b) => a.year - b.year,
    },
    {
      path: "genres",
      label: "分类",
    },
    {
      path: "rating.average",
      label: "评分",
    },
    {
      path: "like",
      label: "收藏",
      content: (movie) => (
        <Like liked={movie.liked} onClick={() => onLike(movie)} />
      ),
    },
  ];
  return (
    <table className="table">
      <TableHeader columns={columns} data={movies} onSetMovies={onSetMovies} sortOrder={sortOrder} />
      <TableBody columns={columns} data={movies} />
    </table>
  );
};

export default MoviesTable;
